<template>
    <div class="resizable-divider" @mousedown="startDrag" :class="{
        'dragging': isDragging,
        'horizontal': direction === 'horizontal',
        'vertical': direction === 'vertical'
    }">
        <div class="divider-line"></div>
        <div class="drag-handle">
            <i :class="direction === 'horizontal' ? 'fas fa-grip-lines-vertical' : 'fas fa-grip-lines'"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ResizableDivider',
    props: {
        direction: {
            type: String,
            default: 'horizontal', // 'horizontal' 或 'vertical'
            validator: value => ['horizontal', 'vertical'].includes(value)
        },
        minWidth: {
            type: Number,
            default: 300
        },
        maxWidth: {
            type: Number,
            default: 500
        },
        minHeight: {
            type: Number,
            default: 100
        },
        maxHeight: {
            type: Number,
            default: 400
        }
    },
    data() {
        return {
            isDragging: false
        };
    },
    methods: {
        startDrag(e) {
            this.isDragging = true;
            this.$emit('resize-start');

            const targetEl = this.$el.parentElement;
            if (!targetEl) return;

            const isHorizontal = this.direction === 'horizontal';
            const startPos = isHorizontal ? e.clientX : e.clientY;
            const initialSize = isHorizontal ? targetEl.offsetWidth : targetEl.offsetHeight;

            const handleMouseMove = (moveEvent) => {
                if (!this.isDragging) return;

                const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
                let newSize;

                if (isHorizontal) {
                    // 水平拉伸 - 向右拖拽增加宽度
                    newSize = initialSize + (currentPos - startPos);
                    newSize = Math.max(this.minWidth, Math.min(this.maxWidth, newSize));
                    this.$emit('resize', { width: newSize });
                } else {
                    // 垂直拉伸 - 向上拖拽增加高度（反转Y轴方向）
                    // startPos - currentPos: 向上拖拽时currentPos减小，差值为正，增加高度
                    // 向下拖拽时currentPos增大，差值为负，减少高度
                    newSize = initialSize + (startPos - currentPos);
                    newSize = Math.max(this.minHeight, Math.min(this.maxHeight, newSize));
                    this.$emit('resize', { height: newSize });
                }
            };

            const handleMouseUp = () => {
                this.isDragging = false;
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
                this.$emit('resize-end');
            };

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);

            e.preventDefault();
            e.stopPropagation();
        }
    }
};
</script>

<style lang="scss" scoped>
.resizable-divider {
    position: absolute;
    z-index: 10;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;

    // 水平拉伸（调整宽度）
    &.horizontal {
        top: 0;
        right: 0;
        width: 8px;
        height: 100%;
        cursor: col-resize;

        .divider-line {
            height: 100%;
            width: 2px;
        }

        .drag-handle {
            height: 50px;
            width: 10px;
        }
    }

    // 垂直拉伸（调整高度）
    &.vertical {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        cursor: row-resize;

        .divider-line {
            width: 100%;
            height: 2px;
        }

        .drag-handle {
            width: 50px;
            height: 10px;
        }
    }

    &:hover,
    &.dragging {
        .divider-line {
            opacity: 1;
        }

        .drag-handle {
            opacity: 0.8;
        }
    }

    .divider-line {
        position: absolute;
        background-color: var(--im-color-primary-light-7);
        opacity: 0.3;
        transition: opacity 0.2s;
    }

    .drag-handle {
        background: var(--im-color-primary-light-8);
        color: var(--im-color-primary);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.2s;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

        i {
            font-size: 10px;
        }
    }
}
</style>